el

2024-07-16 05:59| 来源: 网络整理| 查看: 265

1.表单代码

选取文件

2.rules验证，针对上方表单中的prop="fileList" 这个名字是自定义的，上下文对应即可

rules: { fileList: [{ required: true, validator: validateFileUrl, trigger: 'change' }] },

3.自定义验证方法，写在data()中

data() { //定义校验规则 let validateFileUrl = (rule, value, callback) => { if (this.fileList.length < 1) {//我控制了FileList 长度代表文件个数 callback(new Error("请上传文件")) } else { callback() } }

4. 对于this.fileList（全局变量）的控制，此处的名称是实质的针对文件的变量，与上方校验的名称无关

// 文件列表移除文件时的钩子 handleRemove(file, fileList) { this.fileList = []; }, //上传文件时以及更改时进入 fileChange(file, fileList) { this.fileList = fileList; },

5.由于自定义的触发，比较费劲。。。，所以选择watch辅助一下，加了watch之后，当fileList变量变动之后，就会复发自定义的校验，展示校验信息。

watch: { fileList(nowval, oldval) { this.$refs['addForm'].validateField('fileList'); } },

至此，上传文件校验全程配置结束。

由于表单验证我的需求就是表单开，验证需要在，所以我没有清理验证。

如需清理，可以使用此行代码

this.$refs['addForm'].clearValidate();

【本文地址】

el

el

今日新闻

推荐新闻